<template>
  <div class="login-panel">
    <div class="k" @click="fast"></div>
    <h1 class="title">yidao登陆</h1>
    <el-tabs type="border-card" stretch v-model="currentTab">
      <el-tab-pane name="account">
        <template #label>
          <span><i class="el-icon-user-solid"></i> 账号登录</span>
        </template>
        <login-account ref="loginref" />
      </el-tab-pane>
      <el-tab-pane name="phone" disabled>
        <template #label>
          <span><i class="el-icon-mobile-phone"></i> qq邮箱登录</span>
        </template>
        <login-phone ref="phoneref"></login-phone>
      </el-tab-pane>
    </el-tabs>
    <div class="account-control" v-if="currentTab !== 'phone'">
      <el-checkbox v-model="isKeeoPasswoed">记住密码</el-checkbox>
      <el-link type="primary">忘记密码</el-link>
    </div>
    <el-button type="primary" class="Login" @click="LoginClick"
      >立即登录</el-button
    >
    <el-dialog v-model="dialogTableVisible" title=" 钉钉扫码登录">
      <div id="self_defined_element" class="self-defined-classname"></div>
    </el-dialog>
  </div>
</template>                                                 

<script >
import { defineComponent, ref } from "vue";
import LoginAccount from "./account.vue";
import LoginPhone from "./phonelog.vue";
import "../../../../utils/wx";
import { redirect } from "../../../../service/main";

export default defineComponent({
  components: { LoginAccount, LoginPhone },
  setup() {
    const dialogTableVisible = ref(false);
    //定义属性
    const isKeeoPasswoed = ref(true);
    //保存account组件的实例对象类型是loginAccount
    const loginref = ref();
    const phoneref = ref();
    const currentTab = ref("account");
    //定义方法
    const LoginClick = () => {
      if (currentTab.value === "account") {
        loginref.value?.loginactive(isKeeoPasswoed.value);
      } else {
        phoneref.value?.mailbox();
      }
    };

    //快捷登录
    const fast = () => {
      dialogTableVisible.value = !dialogTableVisible.value;
      console.log("二维码登录");

      const time = ref("");
      const zzys = document.createElement("script");
      zzys.type = "text/javascript";
      zzys.src =
        "https://g.alicdn.com/dingding/h5-dingtalk-login/0.21.0/ddlogin.js";
      zzys.onload = () => {
        console.log("dd脚本插入成功");

        window.DTFrameLogin(
          {
            id: "self_defined_element",
            width: 300,
            height: 300,
          },
          {
            redirect_uri: encodeURIComponent(
              "http://192.168.124.3:8080/ddlogz"
            ),
            client_id: "dingt4p4vkmz6cq9gikv",
            scope: "openid",
            response_type: "code",
            prompt: "consent",
          },
          async (loginResult) => {
            const { redirectUrl, authCode, state } = loginResult;
            console.log(authCode);
            // 这里可以直接进行重定向
            // window.location.href = redirectUrl;
            // 也可以在不跳转页面的情况下，使用code进行授权
            if (time.value !== null) {
              clearTimeout(time.value);
            }
            time.value = setTimeout(() => {
              //这里的this指向的是input
              console.log("authCode", authCode);
              redirect(authCode);
            }, 1000);
          },
          (errorMsg) => {
            // 这里一般需要展示登录失败的具体原因
            alert(`Login Error: ${errorMsg}`);
          }
        );
      };
      document.body.appendChild(zzys);
    };

    return {
      dialogTableVisible,
      isKeeoPasswoed,
      loginref,
      currentTab,
      phoneref,
      LoginClick,
      fast,
    };
  },
});
</script>

<style scoped lang="less">
.login-panel {
  // margin-bottom: 150px;
  width: 320px;
  .k {
    width: 50px;
    height: 50px;
    background: url("../../../../assets/images/kj.png");
    position: absolute;
    top: 0px;
    left: 0px;
    border-bottom-right-radius: 20px;
    animation-name: k;
    animation-duration: 2s;
    animation-iteration-count: infinite;
  }
  @keyframes k {
    0% {
      width: 50px;
      height: 50px;
    }
    100% {
      width: 60px;
      height: 60px;
    }
  }
  .title {
    text-align: center;
  }

  .account-control {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
  }
  .Login {
    margin-top: 10px;
    width: 100%;
    height: 100%;
  }
}
/deep/.el-dialog {
  width: 576px;
  height: 414px;
  // background: pink;
  .self-defined-classname {
    width: 100%;
    height: 100%;
    text-align: center;
  }
}
</style>
